
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
}
.pg{
    width: 250px;
    height: 250px;
    text-align: center;
    margin: 135px auto;
      /* 设置3d元素距离 */
    perspective: 1000px;
}
.pt{
    transform-style: preserve-3d;
    width: 250px;
    height: 250px;
    position: relative;
    transform:rotateY(20deg) rotateX(-5deg);
    transition: all linear .5s;
    animation: pg 3s infinite alternate forwards;
}
.box{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.1), 0 0 50px rgba(0, 0, 0, 0.3);
    opacity: .3;
    background: #123;
    transition: all ease-in-out .5s;
    line-height: 15rem;
    font-size: 23px;
    font-weight: bold;
    color:white;
}
.front{
    transform: translate3d(0,0,125px);
}
.back{
    transform: rotateY(180deg) translate3d(0,0,125px);
}
.left{
    transform: rotateY(-90deg)  translate3d(0,0,125px);
}
.right{
    transform: rotateY(90deg)  translate3d(0,0,125px);
}
.top{
    transform: rotateX(90deg)  translate3d(0,0,125px);
}
.bottom{
    transform: rotateX(-90deg)  translate3d(0,0,125px);
} 
@keyframes pg {
    from{
        transform: rotateX(0) rotateY(0);
    }
    to{
        transform: rotateX(360deg) rotateY(360deg);
    }
}
    </style>
</head>
<body>
    <!-- 3D空间 -->
    <div class="pg">
        <!-- 3d元素 -->
        <div class="pt" >
            <!-- 6个面 -->
            <div class="box front">正面</div>
            <div class="box back">反面</div>
            <div class="box left">左面</div>
            <div class="box right">右面</div>
            <div class="box top">上面</div>
            <div class="box bottom">下面</div>
        </div>
      
    </div>
</body>
</html